<template>
    <div>
        <el-button type="primary" @click="add">+</el-button>
        <el-button type="primary" @click="stop">stop</el-button>
        <div>count: {{ count }}</div>
        <div>doubleCount: {{ newCount }}</div>
    </div>
</template>

<script setup lang="ts">
import { computed, effectScope, getCurrentScope, onScopeDispose, ref, watch, watchEffect } from 'vue';

/**
 * 创建一个 effect 作用域, 可以捕获其中所创建的响应式副作用
 * 这样捕获到的副作用可以一起处理
 */
const scope = effectScope()
const allScope = getCurrentScope()
const count = ref(0)
let newCount = ref(0)

const add = () => {
    count.value++
}

scope.run(() => {

    watch(newCount, () => {
        console.log('watch', newCount.value)
    })

    watchEffect(() => {
        console.log('watchEffect', newCount.value)
    })

    newCount = computed(() => count.value * 2)

    onScopeDispose(() => {
        console.info('onScopeDispose')
    })

})


const stop = () => {
    console.info('stop')
    scope.stop();
    // allScope?.stop()
}
console.log("🚀 ~ stop ~ scope:", scope.active)

</script>